<template>
    <div class="product-box">
        <div class="header">
            <span @click="comeBack" class="goBack"><van-icon name="arrow-left" /></span> 商品</div>
        <div class="product-nav product-top margin-top">
            <div class="item-nav center">综合</div>
            <div class="item-nav center">销量
                <img src="@/assets/image/sort.jpeg" alt="">
            </div>
            <div class="item-nav center">价格
                <img src="@/assets/image/sort.jpeg" alt="">
            </div>
            <div class="item-nav center">新品
                <img src="@/assets/image/sort.jpeg" alt="">
            </div>
        </div>
        <div class="product-nav-goods">
            <div v-for="(items,index1) in goods" :key="index1" class="item">
                <div v-if="active===2" class="item-tip">
                    <p>1%</p>
                    <p>OFF</p>
                </div>
                <img :src="items.image" alt="">
                <p class="item-price">$ {{ items.price }}</p>
                <p class="item-sale">月销量 {{ items.sale }}</p>
                <p class="item-content"> {{ items.content }} </p>
            </div>
        </div>
        <van-popup
                :overlay="false"
                v-model="showProduct"
                position="left"
                closeable
                close-icon-position="top-right"
                :style="{ width: '220px',height:'100vh',margin:'60px 0'}">
            <div class="open-menu">
                <div class="top-title">
                    <img src="@/assets/image/menu.png" alt=""> 筛选
                </div>
                <div class="category-list">
                    <van-collapse :border="false" v-model="activeName" accordion>
                        <van-collapse-item title="饮料酒水" name="1">
                            <div class="main">
                                <div class="item">矿泉水</div>
                                <div class="item">饮料</div>
                                <div class="item">果汁</div>
                                <div class="item">牛奶</div>
                            </div>
                        </van-collapse-item>
                        <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
                        <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
                    </van-collapse>
                </div>

            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: 1,
                showProduct: false,
                activeName: '1',
                goods: [
                    {
                        id: 1,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.11,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 2,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.12,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 3,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.13,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 4,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.14,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 5,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.15,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 6,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.16,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 7,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.17,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                    {
                        id: 8,
                        image: 'https://argos-shop-online.s3.amazonaws.com/test/2023-03-28/b8a68172-576a-4457-b9aa-10c98bb46782.jpg',
                        price: 35.18,
                        sale: 200,
                        content: 'KwikSafety 北卡罗来纳州夏洛特 THU... '
                    },
                ],
            }
        },
        methods:{
            comeBack(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="scss">
    .product-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 3%;

        .header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background: #fff;
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            margin: 0 auto;
            color: #323233;
            font-weight: 500;
            font-size: 16px;
            .goBack{
                position: absolute;
                left: 10px;
            }
        }

        .margin-top {
            margin-top: 45px;
        }

        .product-nav {
            width: 100%;

            padding: 0 3%;
            box-sizing: border-box;
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                height: 40px;
            }

            .nav {
                width: 70%;
                height: 45px;
                display: flex;

                //background: #002FFF;
                .item {
                    height: 40px;
                    width: 50%;
                    font-size: 14px;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    box-sizing: border-box;

                    p {
                        width: 100%;
                        height: 30px;
                        line-height: 40px;
                        text-align: center;
                        color: #999;
                    }

                    .active {
                        color: #000;
                    }

                    span {
                        width: 70%;
                        height: 2.5px;
                        border-radius: 3px;
                        display: flex;
                        background: #002FFF;
                    }
                }
            }

        }

        .product-top {
            width: 100%;
            justify-content: space-between;

            .item-nav {
                width: 20%;
                font-size: 14px;
                text-align: left;
            }

            .center {
                width: 50px;
                display: flex;
                align-items: center;

                img {
                    margin-left: 5px;
                    height: 16px;
                }
            }
        }

        .product-nav-goods {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 80px;

            .item {
                position: relative;
                margin-bottom: 10px;
                width: 160px;
                min-height: 220px;
                padding: 6px;
                border: 1px solid #f6f6f6;

                .item-tip {
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: 35px;
                    background-position: top center;
                    background: url("../../assets/image/sell.png") 50% 50%;
                    border-bottom-left-radius: 50%;
                    border-bottom-right-radius: 50%;
                    width: 35px;
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    padding: 5px 0;
                    box-sizing: border-box;

                    p {
                        color: #fff;
                        width: 100%;
                        text-align: center;
                        font-size: 8px;
                    }
                }

                img {
                    width: 160px;
                    height: 160px;
                }

                .item-price {
                    margin-top: 10px;
                    width: 100%;
                    color: #002FFF;
                    font-size: 16px;
                    font-weight: 500;
                }

                .item-sale {
                    width: 100%;
                    color: #999;
                    font-size: 10px;
                    margin: 5px 0;
                }

                .item-content {
                    width: 100%;
                    color: #000;
                    font-size: 14px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -moz-box-orient: vertical;
                    box-orient: vertical;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .open-menu {
            width: 100%;
            height: 100%;
            background: #f6f6f6;

            .top-title {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                font-size: 14px;
                padding: 0 0 0 5px;
                box-sizing: border-box;

                img {
                    margin-right: 10px;
                    height: 30px;
                }

            }

            .main {
                .item {
                    padding: 0 0 0 20px;
                    box-sizing: border-box;
                    height: 40px;
                    width: 100%;
                    font-size: 12px;
                    color: #333;
                }
            }

            ::-webkit-scrollbar {
                display: none;
            }

        }
    }

</style>
<style scoped>
    >>> .van-cell {
        background: none !important;
    }

    >>> .van-collapse-item__content {
        background: none !important;
    }

</style>
